<template>
  <div class="component-container">
    <el-dialog
      v-model="props.property.visible"
      header-class="header"
      v-bind="props.property"
      :width="dialogWidth"
    >
      <div class="dialog-body">
        <div class="dialog-left" ref="left" :style="{flex: props.leftWidth}">
          <div class="dialog-left-header">
            <div class="header-name" >{{props.leftTitle}}</div>
            <el-icon size="20px" @click="close"><Close /></el-icon>
          </div>
          <slot name="leftContent"></slot>
          <div class="dialog-left-foot">
            <el-button @click="close">取 消</el-button>
            <el-button
              type="primary"
              @click="submit"
            >确 定</el-button>
          </div>
        </div>
        <transition 
          name="cube" mode="out-in"
          @after-leave="onAfterLeave"
          >
          <div class="dialog-right" v-if="props.showRight" :style="{flex: props.rightWidth}">
            <div class="dialog-left-header">
              <div class="header-name" >{{props.rightTitle}}</div>
              <el-icon size="20px" @click="closeRight"><Close /></el-icon>
            </div>
            <slot name="rightContent"></slot>
            <div class="dialog-left-foot" v-if="props.showRightFooter">
              <el-button @click="close">取 消</el-button>
              <el-button
                type="primary"
                @click="submit"
              >确 定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, watch, nextTick, onMounted } from 'vue'

defineOptions({
  name: "Dialog",
});
const emits = defineEmits(['close','submit', 'editRightStatus', 'editComplete'])
const props = defineProps({
  property: {
    default: {},
    type: Object
  },
  leftWidth: {
    type: Number,
    default: 1
  },
  rightWidth:{
    type: Number,
    default: 1
  },
  showRight:{
    type: Boolean,
    default: false
  },
  leftTitle: {
    type: String,
    default:'标题'
  },
  rightTitle: {
    type: String,
    default:'标题'
  },
  showRightFooter: {
    type: Boolean,
    default: true
  }
})
onMounted(()=>{
  dialogWidth.value = props.property.width
})
const close = () => {
  emits('close')
}
const submit = () => {
  emits('submit')
}
const closeRight = () => {
  emits('editRightStatus', false)
}
const dialogWidth = ref('500px')
// 确保在右侧元素销毁后再调整布局
watch(()=>props.showRight, (newVal)=>{
  if (newVal){
    dialogWidth.value = props.property.width
    nextTick(()=>{
      emits('editComplete')
    })
  }
})
// 监听右侧元素销毁完成后的操作
const onAfterLeave = () => {
  dialogWidth.value = props.property.width
  nextTick(()=>{
      emits('editComplete')
    // emits('editComplete')
  })
}
</script>

<style scoped lang="scss">
.component-container {
  width: 100%;
}

::v-deep .el-dialog__header {
  display: none;
}

.dialog-body {
  display: flex;
  width: 100%;
}

.dialog-left {
  padding: 10px;
  border: 1px solid var(--table-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.dialog-right {
  padding: 10px;
  border: 1px solid var(--table-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dialog-left-header{
  display: flex;
  justify-content: space-between;
}
.header-name{
  line-height:1.75rem;
  font-size: 1.125rem;
  overflow-wrap: break-word;
  font-family: Inter, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
}
.dialog-left-foot{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/*效果1*/
.cube-enter-active,
.cube-leave-active {
	transition: all .7s;
}

.cube-enter-from,
.cube-leave-to {
	transform: translateY(0px) rotateX(40deg);
	opacity: 0;
}

.cube-enter-to,
.cube-leave-from {
	transform: translateY(0) rotateX(0deg);
	opacity: 1;
}
/*效果2*/
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(200px, 200px);
  }
  75% {
    transform: translate(0, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.move-enter-to,
.move-leave-to {
  animation: move 5s 0s linear;
}
/*效果3*/
.slide-enter-active {
  animation: slide-in 0.5s;
}
.slide-leave-active {
  animation: slide-in 0.5s reverse;
}
 
@keyframes slide-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
